#include("/common/_layout.html")
#@layout()
#define layoutHead()
	<title>栏目列表</title>
#end
#define layoutBody()
	<body>
		<div class="page-content-wrap">
					<div class="layui-form">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
								<button class="layui-btn layui-btn-small layui-btn-normal addBtn hidden-xs" data-url="/admin/edit/articlecat?app_id=#(login_app_id)&typeid=#(ar_typeid)" target="_blank"><i class="layui-icon">&#xe654;</i></button>
							</div>
							<div class="layui-inline" style="display:none">
								<select id="so_state" name="so_state" lay-filter="so_state">
									<option value="-100" checked>全部</option>
									<option value="1">启用</option>
									<option value="0">禁用</option>
									<option value="-1">删除</option>
								</select>
							</div>
							<button class="layui-btn layui-btn-normal" id="btn_search" style="display:none">搜索</button>
						</div>
					</div>
					<div class="layui-form" id="table-list">
						<table class="layui-table" lay-skin="line">
							<colgroup>
								<col class="hidden-xs" width="50" style="display:none">
								<col class="hidden-xs" width="200">
								<col width="30">
								<col>
								<col width="100">
								<col width="80">
								<col width="150">
							</colgroup>
							<thead>
								<tr>
									<th class="hidden-xs" style="display:none">ID</th>
									<th class="hidden-xs">模块</th>
									<th class="hidden-xs">图标</th>
									<th>栏目名称</th>
									<th>课程分类</th>
									<th>状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="listTbody">
							</tbody>
						</table>
					</div>
		</div>
		<!-- #[[ -->
		<script id="tplTbody" type="text/html">
			{{#  layui.each(d.listdata, function(index, item){ }}
					<tr id='node-{{ item.cat_id }}' class="parent collapsed">
						<td class="hidden-xs" style="display:none">{{ item.cat_id }}</td>
						<td class="hidden-xs">{{ item.type_name }}</td>
						<td><img src="{{ getArticleCatIconUrl(item.cat_icon) }}" style="width:30px;" ></td>
						<td>{{ d.suffix + item.cat_name }}
						</td>
						<td>
							{{# if (item.link_course === 1) { }}
							是
							{{# } }}
							{{# if (item.link_course === 0) { }}
							否
							{{# } }}
						</td>
						<td>
							{{# if (item.cat_state === 1) { }}
							启用
							{{# } }}
							{{# if (item.cat_state === 0) { }}
							禁用
							{{# } }}
						</td>
						<td>
							<div class="layui-inline">
								<button class="layui-btn layui-btn-mini layui-btn-normal  add-btn" data-url="/admin/edit/articlecat?app_id={{ d.app_id }}&typeid={{ item.type_id }}&pid={{ item.cat_id }}" target="_blank"><i class="layui-icon">&#xe654;</i></button>
								<button class="layui-btn layui-btn-mini layui-btn-normal  edit-btn"  data-url="/admin/edit/articlecat?app_id={{ d.app_id }}&typeid={{ item.type_id }}&id={{ item.cat_id }}" target="_blank"><i class="layui-icon">&#xe642;</i></button>
								<button class="layui-btn layui-btn-mini layui-btn-danger del-btn" data-id="{{ item.cat_id }}" data-url="/api/articlecat/del"><i class="layui-icon">&#xe640;</i></button>
							</div>
						</td>
					</tr>
			{{#  }); }}
		</script>
		<!-- ]]# -->
		<script type="text/javascript">
		var page_init = true;
		layui.use(['layer', 'laypage', 'laytpl', 'form'], function(){
			var laypage = layui.laypage
			,layer = layui.layer
			,laytpl = layui.laytpl
			,form = layui.form();
			
			$('#btn_search').click(function(){
				getListData();
			});
			
			// get page data
			function getListData(){
				document.getElementById('listTbody').innerHTML = "";
				var so_state_v = $('#so_state').val();
				var surl = "/api/articlecat/getAll?type_id="+ getUrlParam('typeid') + "&state="+so_state_v;
				
				sendPost(surl, null, function(res){
						console.log(res);
						if (res.hasOwnProperty("listdata")){
								
							filterListData(res.listdata, 0, 0);
							// if (so_state_v == 1){
							// 	//console.log(so_state_v);
							// 	filterListData(res.listdata, 0, 0);
							// }else{
							// 	var row = {app_id: #(login_app_id), listdata: res.listdata, suffix: ''} ;
							// 	// 渲染
							// 	renderTable(row);
							// }
							
						}
				});
			}
			
			function filterListData(listdata, pid, level){
				//筛选
				var listrows = listdata.filter(function (e) { return e.parent_id == pid; });
				//遍历结果对象
				for (var i = 0; i < listrows.length; i++) {
						//alert(listrows[i].menuname);
						var shtml = "";
						if (level>0){
							for(j=0;j<level;j++){
								shtml += '&nbsp;&nbsp;&nbsp;&nbsp;';
							}
							shtml += '├─ ';
						}
						shtml += listrows[i].cat_sort + ". ";
						var row = {app_id: #(login_app_id), listdata: [], suffix: shtml} ;
						row.listdata.push(listrows[i]);
						// 渲染
						renderTable(row);
						// 迭代
						filterListData(listdata, listrows[i].cat_id, level+1);
				}
			}

			// render table
			function renderTable(listData){
				var getTpl = document.getElementById('tplTbody').innerHTML;
				laytpl(getTpl).render(listData, function(html){
					document.getElementById('listTbody').innerHTML += html;
				});
			}
			
			getListData();
			
		});

		
		</script>
	</body>

#end